<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>Translater powerd by Google AJAX Language API</title>
<style type="text/css">
div#trans{
	width:40em;
}
#inarea1, #inarea2, #inarea3 {
	width:100%;
	height:75px;
}
div#googleBranding {
	background-color:#000;
	margin:2em 0 0 0;
	padding:2px;
	width:auto;
	height:20px;
}
div#googleBranding .gBranding {text-align:right;}
div#googleBranding .gBrandingText {color:#fff;}



</style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1", {uncompressed:true});
google.load("jqueryui", "1", {uncompressed:true});
google.load("language", "1");

function init() {
	$('h2').click(function(){$(this).next().slideToggle('fast');});
	google.language.getBranding('googleBranding');
	setUseLang();
//	var langList = document.getElementById("ul");
//	for (var lang in google.language.Languages) {
//		var langOpt = new Option(lang, google.language.Languages[lang]);
//		langList.options[langList.options.length] = langOpt;
//	}
}

function setUseLang(){
	var langList = document.getElementById("ul");
	for (var lang in google.language.Languages) {
		langList.innerHTML
	}
}

function translate() {
	var source = document.getElementById("inarea1").value;
	// (2) 入力された文字列から、言語を自動的に判別する
	google.language.detect(source, function(detectResult) {
	if (detectResult.error) {
		alert("Error:" + error.message); return;
	}
	// 選択されている言語を取得
	var langList = document.getElementById("target-language");
	targetLang = langList.options[langList.selectedIndex].value;
	// 翻訳
	google.language.translate(
		source,
		detectResult.language,
		targetLang,
		function(result) {
			if (result.error) {
				alert("Error:" + result.message);
				return;
			}
			document.getElementById("inarea2").value = result.translation;
		});
	});
}

google.setOnLoadCallback(init);
</script>
<script type="text/javascript" src="../js/jquery.cookie.js"></script>
</head>
<body>
<div id="header">
<h1>Translater</h1>
</div>

<div id="trans">
	<textarea id="inarea1"></textarea>
	<label for="sl">原文の言語</label><select id="sl"></select>
	<label for="tl">翻訳する言語</label><select id="tl"></select>
	<button onclick="translate()">翻訳</button>
	<textarea id="inarea2"></textarea>
</div>

<div id="tag">
<h2>タグ</h2>
<div class="inner">
a<br>a<br>a<br>a<br>
</div>
</div>

<div id="history">
<h2>履歴</h2>
<div class="inner">
a<br>a<br>a<br>a<br>
</div>
</div>

<div id="save">
<h2>保存</h2>
<div class="inner">
a<br>a<br>a<br>a<br>
</div>
</div>

<div id="setting">
<h2>設定</h2>
<div class="inner">
<label for="ul">使用する言語</label><div id="ul"></div>
</div>
</div>

<div id="footer">
<p>Translater powerd by Google AJAX Language API</p>
<div id="googleBranding"></div>
</div>
</body>
</html>
